<template>
  <el-dialog
    :visible.sync="isShow"
    destroy-on-close
    :title="title"
    width="85%"
    top="60px"
    :close-on-click-modal="false"
  >
    <columnLayout title="设备信息" border>
      <el-form
        ref="form"
        v-loading="loading"
        slot="content"
        :model="fields"
        :rules="rules"
        label-width="90px"
      >
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="设备编码:" prop="code">
              <el-input
                v-model.trim="fields.code"
                autocomplete="off"
                size="small"
                placeholder="编码自动生成"
                maxlength="6"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备名称:" prop="name">
              <el-input
                v-model.trim="fields.name"
                autocomplete="off"
                size="small"
                placeholder="请输入设备名称"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下拉选择:" prop="name">
              <el-select
                filterable
                clearable
                placeholder="请选择设备类型"
                :loading="loading"
              >
                <el-option>值</el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="设备型号:" prop="specification">
              <el-input
                v-model.trim="fields.specification"
                autocomplete="off"
                size="small"
                placeholder="请输入设备型号"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备厂商:" prop="factory">
              <el-input
                v-model.trim="fields.factory"
                autocomplete="off"
                size="small"
                placeholder="请输入设备厂商"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备价格¥:" prop="price">
              <el-input
                v-model.trim="fields.price"
                autocomplete="off"
                size="small"
                placeholder="请输入设备价格"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="生产日期:" prop="produceDate">
              <el-date-picker
                v-model="fields.produceDate"
                type="date"
                size="small"
                placeholder="请输入生产日期"
                align="right"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购日期:" prop="purchaseDate">
              <el-date-picker
                v-model="fields.purchaseDate"
                type="date"
                size="small"
                placeholder="请选择采购日期"
                align="right"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投产日期:" prop="applyDate">
              <el-date-picker
                v-model="fields.applyDate"
                type="date"
                size="small"
                placeholder="请选择投产日期"
                align="right"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="地址:" prop="location">
              <el-input
                v-model.trim="fields.location"
                autocomplete="off"
                size="small"
                placeholder="请输入地址"
                maxlength="100"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="折旧年限:" prop="canUseYear">
              <el-input
                v-model.trim="fields.canUseYear"
                autocomplete="off"
                size="small"
                placeholder="请输入设备折旧年限"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划起止日期:" prop="canUseYear">
              <el-date-picker
                v-model="value1"
                type="datetimerange"
                align="right"
                size="small"
                unlink-panels
                range-separator="至"
                start-placeholder="请选择开始日期"
                end-placeholder="请选择结束日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="16">
            <el-form-item label="备注:" prop="comment">
              <el-input
                type="textarea"
                :rows="1"
                v-model.trim="fields.comment"
                autocomplete="off"
                size="small"
                placeholder="请输入备注"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="上传附件:" prop="comment">
              <upload-file
                action="/"
                @click="onClickFile"
                @delete="deleteFile"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </columnLayout>
    <columnLayout title="设备列表">
      <div slot="column-actioons">
        <el-tooltip content="添加设备" placement="top" effect="light">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="showgoodsPage()"
          ></el-button>
        </el-tooltip>
      </div>

      <vxe-table
        ref="table"
        border
        size="mini"
        highlight-current-row
        :data="fields.detailList"
        :edit-config="{ trigger: 'click', mode: 'cell' }"
        align="left"
        show-overflow
        show-header-overflow
        slot="content"
        resizable
      >
        <vxe-table-column type="seq" width="50" title="序号" align="center" />
        <vxe-table-column
          field="code"
          title="设备编码"
          width="150px"
          align="left"
          show-overflow
        />
        <vxe-table-column
          field="name"
          title="设备名称"
          width="150px"
          align="left"
        />
        <vxe-table-column
          field="specs"
          title="设备型号"
          show-overflow
          width="150px"
          align="left"
        />
        <vxe-table-column field="status" title="设备状态" width="100">
          <template v-slot="{ row }">
            <div v-for="item in statusList" :key="item.id">
              <span v-if="row.status === item.value">{{ item.label }}</span>
            </div>
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="factory"
          title="设备厂商"
          width="150px"
          align="left"
        />

        <vxe-table-column
          field="price"
          title="设备价格¥"
          width="150px"
          align="right"
        />
        <vxe-table-column
          field="produceDate"
          title="生产日期"
          width="150px"
          align="left"
        />
        <vxe-table-column
          field="purchaseDate"
          title="采购日期"
          width="150px"
          align="left"
        />
        <vxe-table-column
          field="applyDate"
          title="投产日期"
          width="150px"
          align="left"
        />
        <vxe-table-column
          field="location"
          title="地址"
          width="150px"
          align="left"
        />
        <vxe-table-column
          field="canUseYear"
          title="折旧年限"
          width="150px"
          align="left"
        />

        <!-- <vxe-table-column
          field="number"
          title="销售量"
          :edit-render="{
            name: '$input',
            props: { type: 'int' },
            maxlength: '11',
          }"
          show-overflow
          width="100"
          align="right"
        /> -->
        <!-- <vxe-table-column
          field="price"
          title="销售单价￥"
          :edit-render="{
            name: '$input',
            props: { type: 'int' },
            maxlength: '11',
          }"
          show-overflow
          width="100"
          align="right"
        /> -->
        <!-- <vxe-table-column
          field="hasSendNumber"
          title="已发货数量"
          show-overflow
          width="100"
          align="right"
        /> -->
        <!-- <vxe-table-column
          field="totalMoney"
          title="小计￥"
          show-overflow
          width="100"
          align="right"
        />-->
        <vxe-table-column
          field="comment"
          title="备注"
          show-overflow
          width="130px"
          align="left"
        />

        <vxe-table-column title="操作" width="125" show-overflow align="center">
          <template v-slot="{ row, rowIndex }">
            <el-tooltip
              class="item"
              effect="light"
              content="删除"
              placement="top"
            >
              <vxe-button
                size="mini"
                icon="el-icon-delete"
                status="danger"
                @click="onSingleDel(rowIndex, row)"
              />
            </el-tooltip>
          </template>
        </vxe-table-column>
      </vxe-table>
    </columnLayout>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="loading" plain size="mini" @click="onCancel"
        >取消</el-button
      >
      <el-button :loading="loading" type="danger" size="mini" @click="onReject"
        >审核驳回</el-button
      >
      <el-button :loading="loading" type="primary" size="mini" @click="onPass"
        >审核通过</el-button
      >
      <el-button
        :loading="loading"
        type="primary"
        size="mini"
        @click="onSaveDraft"
        >保存</el-button
      >
      <el-button
        :loading="loading"
        type="primary"
        size="mini"
        @click="onOkBtnClick"
        >提交</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import uploadFile from '@/components/uploadFile'
import columnLayout from '../../../components/columnLayout'
export default {
  props: {
    value: {
      type: Object,
      default: () => Object.create({}),
    },
  },
  components: {
    columnLayout,
    uploadFile,
  },
  data() {
    return {
      loading: false,
      isShow: true,
      dialog: false,
      fields: {
        id: '',
        code: '',
        name: '',
        specification: '',
        factory: '',
        price: '',
        produceDate: '',
        purchaseDate: '',
        applyDate: '',
        location: '',
        canUseYear: '',
        comment: '',
      },
      statusList: [
        { label: '未启用', value: 'unuse' },
        { label: '已启用', value: 'using' },
        { label: '维修中', value: 'repair' },
        { label: '已报废', value: 'Scrap' },
      ],
      rules: {
        name: [
          {
            required: true,
            message: '请输入设备名称',
            trigger: 'blur',
          },
        ],
        specification: [
          {
            required: true,
            message: '请输入设备型号',
            trigger: 'blur',
          },
        ],
      },
      title: '设备新增',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      value1: '',
    }
  },
  watch: {
    isShow: function () {
      this.$emit('input', null)
    },
  },
  created() {
    if ((this.value.id || null) == null) {
      this.title = '设备新增'
    } else {
      this.title = '设备编辑'
      this.fields = this.value
      // this.get(this.value.id || null);
    }
  },
  computed: {},
  methods: {
    //单击文件
    onClickFile(fileInfo) {
      console.log('单击文件', fileInfo)
    },
    //删除文件
    deleteFile({ fileInfo, fileList }) {
      console.log('删除文件', fileInfo, fileList)
    },
    onOkBtnClick() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          if ((this.value.id || null) == null) {
            // add(this.fields)
            //   .then(() => {
            //     this.loading = false;
            //     this.$parent.onSearchBtnClick();
            this.$notify({
              title: '提交成功',
              type: 'success',
              duration: 1500,
            })
            this.$emit('colseDialog')
            // })
            // .catch(() => {
            //   this.loading = false;
            // });
          } else {
            // edit(this.fields)
            //   .then(() => {
            //     this.loading = false;
            //     this.$parent.onSearchBtnClick();
            this.$notify({
              title: '提交成功',
              type: 'success',
              duration: 1500,
            })
            this.$emit('colseDialog')
            // })
            // .catch(() => {
            //   this.loading = false;
            // });
          }
        }
      })
    },
    //保存
    onSaveDraft() {
      this.$notify({
        title: '保存成功',
        type: 'success',
        duration: 1500,
      })
      this.$emit('colseDialog')
    },
    //审核驳回
    onReject() {
      this.$notify({
        title: '驳回成功',
        type: 'success',
        duration: 1500,
      })
      this.$emit('colseDialog')
    },
    onPass() {
      this.$notify({
        title: '审核通过',
        type: 'success',
        duration: 1500,
      })
      this.$emit('colseDialog')
    },
    //取消
    onCancel() {
      this.$emit('colseDialog')
    },
    async get(id) {
      // this.loading = true;
    },
    //
    //单个删除
    onSingleDel() {
      this.deleteData()
    },
    async deleteData() {
      this.$notify({
        type: 'success',
        message: '删除成功!',
      })
    },
  },
}
</script>

<style scoped></style>
